<script lang="ts" setup>
// eslint-disable-next-line ts/ban-ts-comment
// @ts-ignore
import VueResizable from 'vue-resizable'

import { ArrowDown, CirclePlus } from '@element-plus/icons-vue'
import WorkspaceTableQueryParam from './table/queryParam.vue'
import WorkspaceTableBodyParam from './table/bodyParam.vue'

onMounted(() => {})

const record: any = ref(
  {
    response: '',
  },
)

const methodList = [
  { label: 'GET', value: 'GET' },
  { label: 'POST', value: 'POST' },
  { label: 'PUT', value: 'PUT' },
  { label: 'DELETE', value: 'DELETE' },
]

const setting = ref({
  method: 'GET',
  url: '',
  type: '1',
  json: '',
  authType: 'Bearer',
  authText: '',
})

function handleAtuh(type: string) {
  setting.value.authType = type
}

const tabList = [
  { key: 'param', name: '参数' },
  { key: 'body', name: '请求体' },
  { key: 'header', name: '请求头' },
  { key: 'auth', name: '授权' },
]
const activeTab = ref(tabList[0])
function handleTab(item: any) {
  activeTab.value = item
}

// query参数
const queryRef = ref()
const queryList: any = ref([])

function handleAddQuery() {
  queryRef.value.handleAdd()
}

function handleQueryChange(list: any) {
  queryList.value = list
}

// body参数
const bodyRef = ref()
const bodyList: any = ref([])

function handleAddBody() {
  bodyRef.value.handleAdd()
}

function handleBodyChange(list: any) {
  queryList.value = list
}

// header参数
const headerRef = ref()
const headerList: any = ref([])

function handleAddHeader() {
  headerRef.value.handleAdd()
}

function handleHeaderChange(list: any) {
  headerList.value = list
}

function handleDownload() {}
</script>

<template>
  <main class="mix-splitter h-full w-full overflow-auto px-1">
    <section class="my-2 flex">
      <el-input v-model="setting.url" placeholder="">
        <template #prepend>
          <el-select v-model="setting.method" style="width: 120px">
            <el-option v-for="item in methodList" :key="item.value" :value="item.value" :label="item.label" />
          </el-select>
        </template>
      </el-input>

      <el-button-group class="mx-3 min-w-21 w-21">
        <el-button type="primary">
          发送
        </el-button>

        <el-dropdown>
          <el-button type="primary" :icon="ArrowDown" style="padding: 8px 4px;" />
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="handleDownload">
                发送并下载
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-button-group>
      <el-button>暂存</el-button>
      <el-button>保存为用例</el-button>
    </section>
    <VueResizable :active="['b']" :height="500" :min-height="32">
      <section class="mt-2 h-full overflow-hidden text-sm">
        <nav class="mb-2 h-9 flex items-center text-sm">
          <template v-for="(item, index) in tabList" :key="index">
            <div
              class="relative mr-1 w-18 flex cursor-pointer items-center justify-center color-[#6e737b] hover:color-[#216ef2]"
              :class="{ active: activeTab.key === item.key }"
              @click="handleTab(item)"
            >
              <span>{{ item.name }}</span>
            </div>
          </template>
        </nav>
        <template v-if="activeTab.key === 'param'">
          <header class="relative mb-2 h-7 flex items-center justify-between">
            <div class="color-[#171b1f]">
              查询参数
            </div>
            <div>
              <el-button link>
                <el-icon size="18" @click="handleAddQuery">
                  <CirclePlus />
                </el-icon>
              </el-button>
            </div>
          </header>
          <section class="w-full" style="height: calc(100% - 88px)">
            <WorkspaceTableQueryParam ref="queryRef" :list="queryList" @change="(val:any) => handleQueryChange(val)" />
          </section>
        </template>
        <template v-else-if="activeTab.key === 'body'">
          <header class="mb-2 h-7 flex items-center justify-between">
            <div class="flex items-center">
              <span class="mr-6 color-[#171b1f]">
                内容类型
              </span>
              <el-radio-group v-model="setting.type">
                <el-radio value="1">
                  form-data
                </el-radio>
                <el-radio value="2">
                  x-www-form-urlencoded
                </el-radio>
                <el-radio value="3">
                  json
                </el-radio>
              </el-radio-group>
            </div>

            <div>
              <el-button link>
                <el-icon size="18" @click="handleAddBody">
                  <CirclePlus />
                </el-icon>
              </el-button>
            </div>
          </header>
          <section v-if="setting.type !== '3'" class="w-full" style="height: calc(100% - 88px)">
            <WorkspaceTableBodyParam ref="bodyRef" :list="bodyList" @change="(val:any) => handleBodyChange(val)" />
          </section>
          <section v-else class="w-full border-1 border-[#e1e1e1] p-1" style="height: calc(100% - 88px)">
            <JsonEditor v-model="setting.json" language="json" />
          </section>
        </template>
        <template v-if="activeTab.key === 'header'">
          <header class="mb-2 h-7 flex items-center justify-between">
            <div class="color-[#171b1f]">
              请求头列表
            </div>
            <div>
              <el-button link>
                <el-icon size="18" @click="handleAddHeader">
                  <CirclePlus />
                </el-icon>
              </el-button>
            </div>
          </header>
          <section class="w-full" style="height: calc(100% - 88px)">
            <WorkspaceTableQueryParam ref="headerRef" :list="headerList" @change="(val:any) => handleHeaderChange(val)" />
          </section>
        </template>
        <template v-if="activeTab.key === 'auth'">
          <header class="mb-2 h-7 flex items-center justify-between">
            <div class="flex items-center">
              <span class="mr-6 color-[#171b1f]">
                授权类型
              </span>
              <el-dropdown>
                <div class="flex items-center">
                  {{ setting.authType }}
                  <el-icon class="el-icon--right">
                    <ArrowDown />
                  </el-icon>
                </div>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="handleAtuh('None')">
                      None
                    </el-dropdown-item>
                    <el-dropdown-item @click="handleAtuh('Bearer')">
                      Bearer
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </header>
          <section v-if="setting.authType === 'Bearer'" style="max-height: calc(100% - 88px)" class="w-full">
            <el-input
              v-model="setting.authText"
              style="width: 100%;height: 100%;"
              type="textarea"
              placeholder=""
            />
          </section>
          <section v-else style="max-height: calc(100% - 88px)" class="w-full border-0 border-[#e1e1e1] p-1" />
        </template>
      </section>
    </VueResizable>
    <VueResizable :active="['b']" :height="500" :min-height="32">
      <section class="mt-2 h-full overflow-hidden text-sm">
        <header class="mb-2 h-7 flex items-center justify-between">
          <div class="color-[#171b1f]">
            返回响应
          </div>
        </header>
        <section class="w-full border-1 border-[#e1e1e1] p-1" style="height: calc(100% - 44px)">
          <JsonEditor v-model="record.response" language="json" />
        </section>
      </section>
    </VueResizable>
  </main>
</template>

<style lang="scss" scoped>
@use '~/assets/splitpanes.scss';
</style>

<style lang="scss" scoped>
.active {
  color: #216ef2;
}

.active:after {
  position: absolute;
  bottom: -8px;
  left: calc(50% - 36px);
  content: '';
  width: 72px;
  height: 2px;
  background: #216ef2;
}
</style>
